<template>
  <div>
    <template v-if="$config.i18n.enabled === 1 && hasLanguageList">
      <Dropdown trigger="click" @on-click="selectLang">
        <a href="javascript:void(0)">
          {{ title }}
          <Icon :size="18" type="md-arrow-dropdown"/>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem
            v-for="(value,key) in languageList"
            :name="key"
            :key="`lang-${key}`"
          >{{ value }}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Language',
  computed: {
    // 展示的标题
    title() {
      return this.$t('language')
    },
    // 配置的语言列表
    languageList() {
      return this.$config.i18n.languageList
    },
    // 是否有语言列表
    hasLanguageList() {
      let num = 0
      for (let key in this.languageList) {
        if (key) {
          num++
        }
      }
      return num > 1
    }
  },
  methods: {
    selectLang(name) {
      this.$i18n.locale = name
      sessionStorage.setItem('locale', name)
    }
  }
}
</script>
